<template>
    <div class="robot-management">
        <div class="buttons">
            <el-button type="primary" @click="save">保存</el-button>
        </div>
        <div class="switch">
            <div>
                {{ enable == 1 ? '机器人已开启' : '机器人已开启' }}
            </div>
            <div>
                <el-switch v-model="enableFlag" @change="changeEnable" />
            </div>
            <div style="color: #ccc;margin-left: 30px;">
                重新启动需要等待一分钟生效
            </div>
        </div>
        <div class="idset">
            <div>
                机器人wxid：
            </div>
            <div>
                <el-input v-model="robot.cid" placeholder="请输入微信id" @change="cidChange" />
            </div>
            <div>
                <span v-if="onlineStatus" style="color: aquamarine;">
                    设备在线
                </span>
                <span v-else style="color: #ccc;">
                    设备离线
                </span>
            </div>
        </div>
        <div class="idset">
            <div>
                转发时间间隔（秒）：
            </div>
            <div>
                <el-input v-model="robot.interval" placeholder="请输入转发时间间隔" type="number" />
            </div>
        </div>
        <div class="idset">
            <div>
                转发模板：
            </div>
            <div>
                <el-input v-model="robot.template" placeholder="请输入转发模板" type="textarea" Rows="20"
                    style="width: 500px;"></el-input>
            </div>
            <div class="remark">
                转发模板替换内容：<br />
                #[链接列表] =》 http://localhost:8088/#/admin
            </div>
        </div>
        <div class="idset">
            <div>
                {{ robot.blackFlag == true ? '转发黑名单模式' : '转发白名单模式' }}
            </div>
            <div>
                <el-switch v-model="robot.blackFlag" @change="changeEnableBlack" />
            </div>
        </div>
        <div class="qun">
            <div>群名单
                <!-- 群名单<a @click="robot.names.push('')" style="color: aqua;">添加</a> -->
            </div>
            <div class="namesBox">
                <div>
                    <el-button type="primary" @click="robot.names.push('')" style="margin-bottom: 10px;">加一行</el-button>
                </div>
                <div>
                    <ul>
                        <li v-for="(item, index) in robot.names" :key="index" style="display: flex;">
                            <el-input type="text" v-model="robot.names[index]" @change="flashTableList" />
                            <a @click="delNames(index)"
                                style="color: red;width: 60px;font-size: 30px;margin-left: 20px;">x</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="groupList">
                <el-button @click="getWxGroup">刷新群列表</el-button>
                <div class="remark">
                    如果群列表为空，需要先在客服端中操作该微信刷新群列表。
                </div>
                <el-table :data="tableList" style="width: 100%" v-if="robot.blackFlag == true " @row-click="groupRowClick">
                    <el-table-column label="发送消息群名单" width="200px">
                        <template slot-scope="scope" class="qunItem">
                            <div class="qunItem">
                                <div class="head">
                                <img :src="scope.row.avatar" />
                            </div>
                            <div class="name">
                                {{ scope.row.nickname }}
                            </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="tableList" style="width: 100%" v-if="robot.blackFlag == false ">
                    <el-table-column label="不发送消息群名单" width="200px">
                        <template slot-scope="scope" class="qunItem">
                            <div class="qunItem">
                                <div class="head">
                                <img :src="scope.row.avatar" />
                            </div>
                            <div class="name">
                                {{ scope.row.nickname }}
                            </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getConfig, insert, update, del } from '@/api/admin/sysConfig'
import { isOnline, getWxGroupList } from '@/api/admin/custom'

export default {
    name: 'RobotManagement',
    data() {
        return {
            id: '',
            robotConfigKey: 'robotConfig',
            robot: {
                cid: '',
                interval: 0,
                template: '',
                blackFlag: false,
                names: [''],
            },
            enable: 0,
            enableFlag: false,
            onlineStatus: false,
            qunList: [],
            tableList:[],
            time:null,
        }
    },
    computed: {
        ...mapState({
            adminInfo: 'adminInfo'
        })
    },
    mounted() {
        this.updateCnfig();
        //5秒一次
        this.time=setInterval(this.checkIsOnline, 5000)
    },
    //销毁
    beforeDestroy() {
        clearInterval(this.time)
    },
    methods: {
        delNames(idex){
            this.robot.names.splice(idex, 1);
            this.flashTableList();
        },
        groupRowClick(row){
            //如果已存在则不执行
            if(this.robot.names.includes(row.nickname)){
                return
            }
            this.robot.names.push(row.nickname)
            this.flashTableList();
        },
        cidChange() {
            this.checkIsOnline();
            this.getWxGroup();
        },
        flashTableList(){
            //this.qunList里，名字不在names里的，都要加进去
            this.tableList=this.qunList.filter(item=>{
                let flag=true;
                this.robot.names.forEach(name=>{
                    if(item.nickname==name){
                        flag=false
                    }
                });
                return flag
            })
        },
        getWxGroup() {
            getWxGroupList(this.robot.cid).then(res => {
                this.qunList = res.data;
                this.flashTableList();
            });
        },
        checkIsOnline() {
            this.onlineStatus = false;
            isOnline(this.robot.cid).then(res => {
                this.onlineStatus = res.data;
            })
        },
        updateCnfig() {
            getConfig(this.robotConfigKey).then(res => {
                this.id = res.data.id;
                this.robot = JSON.parse(res.data.value);
                console.log(this.robot);
                this.enable = res.data.enable;
                this.enableFlag = this.enable == 1;
                this.cidChange();
            })
        },
        getDataInfo() {
            return {
                id: this.id,
                config: this.robotConfigKey,
                value: JSON.stringify(this.robot),
                enable: this.enable
            }
        },
        save() {
            if (this.id) {
                update(this.getDataInfo()).then(res => {
                    this.$message.success('保存成功')
                    this.updateCnfig();
                })
            } else {
                insert(this.getDataInfo()).then(res => {
                    this.$message.success('保存成功')
                    this.updateCnfig();
                })
            }
        },
        changeEnable() {
            this.enable = this.enableFlag ? 1 : 0
            update({
                id: this.id,
                config: this.robotConfigKey,
                enable: this.enable
            }).then(res => {
                this.$message.success('保存成功')
            });
        },
        changeEnableBlack() {

        }
    }
}
</script>
<style scoped>
.robot-management {
    display: flex;
    flex-direction: column;
}

.robot-management>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.remark{
    margin: 10px;
    color: #ccc;
}
.robot-management>div>div:first-child {
    font-weight: bold;
    font-size: 16px;
    min-width: 150px;
}

.namesBox {

    /**每行一条 */
    a:hover {
        color: red;
    }

    li {
        margin-bottom: 10px;
    }
}

.groupList {
    margin-left: 30px;

    .qunItem {
        display: flex;
        flex-direction: row;

        .head {
            margin: 0px 10px;

            img {
                width: 40px;
                height: 40px;
            }
        }

        .name {
            line-height: 40px;
        }
    }
}
</style>